import { defineStore } from "pinia";
import { ref, reactive } from 'vue';
import { v4 as uuidv4 } from 'uuid'; // 建议引入uuid生成唯一ID（避免重复）

export const useRenderTreeStore = defineStore('renderTree', () => {
  // 渲染树（响应式数组）
  const treeArr = ref([]);

  // 映射表（用reactive包装Map，确保响应式）
  const treeMap = reactive(new Map()); // 注意：用Map而非普通对象，且通过reactive追踪变化

  //当前组件的Id
  const componentId=ref('');

  // 构建映射表（初始化或树结构变化时调用）
  function buildMap(renderTree) {
    treeMap.clear(); // 先清空旧映射
    const stack = [...renderTree]; // 复制根节点数组
    while (stack.length > 0) {
      const node = stack.shift(); // 用shift()按顺序取元素（先进先出，保持children顺序）
      if (!node.id) {
        // 确保节点有唯一ID
        node.id = uuidv4();
      }
      treeMap.set(node.id, node);
      // 子节点入栈（保持原有顺序）
      if (node.children && node.children.length) {
        stack.push(...node.children);
      }
    }
  }

  //  新增节点到渲染树
  function addRenderTree(parentId, node,newIndex) {
    console.log('----newIndex',newIndex)
    // 确保节点有唯一ID
    if (!node.id) {
      node.id = uuidv4();
    }
    // 初始化children（避免undefined.push()错误）
    if (!node.children) {
      node.children = [];
    }
    // 情况1：父节点是根节点（parentId为'root'或树为空）——因为会存在多个根节点或者一个根节点
    if (parentId === 'root' || treeArr.value.length === 0) {
      treeArr.value.splice(newIndex,0,node);//通过newIndex进行有顺序的添加，因为不知道在列表之前添加还是之后添加，保证视图和渲染树的数据保持一致
      treeMap.set(node.id, node); // 同步到映射表
      buildMap(treeArr.value); // 重新构建映射表（确保所有节点都被收录）     
      return false;
    }

    // 情况2：父节点是普通节点（从映射表查找）
    const parentNode = treeMap.get(parentId);
    if (!parentNode) {
      console.error(`父节点不存在：parentId=${parentId}`);
      return false; // 避免后续错误
    }
    // 初始化父节点children（防止undefined）
    if (!parentNode.children) {
      parentNode.children = [];
    }
    console.log('insert之前',newIndex,treeArr.value)
    parentNode.children.splice(newIndex,0,node);//通过newIndex进行有顺序的添加，因为不知道在列表之前添加还是之后添加，保证视图和渲染树的数据保持一致
    treeMap.set(node.id, node); // 新增节点加入映射表
    // 无需全量重建映射表，仅添加新节点即可（优化性能）
  }

  //  初始化渲染树（例如从后端加载数据后调用）
  function initRenderTree(initialTree) {
    treeArr.value = initialTree;
    buildMap(initialTree); // 初始化映射表
  }

  // 将多列布局中的拖拽的组件放到渲染树上，放到columns属性数组中
  function addToMultiColumn(parentId,columnIndex,node,newIndex){
    // console.log('----multi-column',parentId,columnIndex,node,treeArr.value,treeMap)
    const parentNode=treeMap.get(parentId);
    parentNode.columns[columnIndex].children.splice(newIndex,0,node);
    treeMap.set(node.id, node); // 新增节点加入映射表
    buildMap(treeArr.value); // 重新构建映射表（确保所有节点都被收录）   
    // console.log('treeArr--',treeArr.value,treeMap)
  }

  //保存当前组件的Id，便于组件设置中获取到对应的组件
  function saveComponentId(id){
    console.log('kkkkk',id)
    if(!id){
      console.log('组件id为空，组件id保存失败')
      return false;
    }
    componentId.value=id;
    // console.log('componentId.value',componentId.value)
  }

  //根据id查找到对应的组件，进行属性设置，修改props
  function editProps(props,attr){
    if(!componentId.value) return false;
    const node=treeMap.get(componentId.value);
    // console.log('editProps----',node,props);
    if(!node.props[attr]) return false;
    node.props[attr]=props[attr];
    buildMap(treeArr.value); // 重新构建映射表（确保所有节点是最新的）  
    console.log('修改后的treeArr',treeArr.value,treeMap)

  }

  return {
    treeArr,
    treeMap,
    componentId,
    addRenderTree,
    buildMap,
    initRenderTree,
    addToMultiColumn,
    saveComponentId,
    editProps,
  };
});